<template>
	<div class="search">
		<div @click="allAddress" class="address">
			<span class="city">{{$store.state.locationCity}}</span>
			<i class="iconfont icon-icon--"></i>
		</div>
		<div class="searchBox">
			<p><i class="iconfont icon-sousuo"></i> 影片/影院/影人，任你搜</p>
		</div>
	</div>
</template>

<script>
	import BMap from 'BMap';
	export default {
		name: "search",
		data() {
			return {
				
			}
		},
		created() {
			//获取城市
			let cityList = localStorage.getItem("allAddressList");
			if(!cityList){				
				this.getCityData();
			}
		},
		methods: {
			getCityData(){
				this.$http.get("/api/cityList").then(res => {
					let allAddressList = res.data.data.p;
					let hotCitys = allAddressList.slice(0,9); //热门城市
					let newArr = allAddressList.sort(function(a,b){
						a.pinyinFull = a.pinyinFull.replace(a.pinyinFull.charAt(0),a.pinyinFull.charAt(0).toUpperCase());
						b.pinyinFull = b.pinyinFull.replace(b.pinyinFull.charAt(0),b.pinyinFull.charAt(0).toUpperCase());
						return a.pinyinFull.localeCompare(b.pinyinFull);
					})
					let allCitys = this.twoArray(newArr);//所有城市
					localStorage.setItem("hotCitys",JSON.stringify(hotCitys));
					localStorage.setItem("allCitys",JSON.stringify(allCitys));
					localStorage.setItem("allAddressList",JSON.stringify(allAddressList));
				})
			},
			twoArray(arr){
				let firstLetter = arr[0].pinyinFull.charAt(0);
				let itemArr = [];
				let result = [];
				let k = 0;
				arr.map(val=>{
					if(val.pinyinFull.charAt(0) == firstLetter){
						itemArr.push(val);
						result[k] = {
							title: firstLetter,
							list: itemArr
						};
					}else{
						firstLetter = val.pinyinFull.charAt(0);
						itemArr = [];
						itemArr.push(val);
						result[++k] = {
							title: firstLetter,
							list: itemArr
						};
					}
				})
				console.log(result);
				return result;
			},
			getPosition() {
				var that = this;
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					let locationCity = r.address.city.substr(0, r.address.city.length - 1);
					that.$store.commit("setCity",locationCity);
				}, {
					enableHighAccuracy: true
				})
			},
			allAddress() {
				this.$router.push({
					path: "/address"
				});
			}
		},
		mounted() {
			if(this.$store.state.locationCity == "定位中"){
				this.getPosition();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.search {
		width: 100%;
		background: #f6f6f6;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: vw(10) 0;
		border-bottom: vw(2) solid #d8d8d8;
		.address {
			width: vw(65);
			font-size: vw(16);
			display: flex;
			align-items: center;
			.city {
				white-space: nowrap;
				display: inline-block;
				width: vw(46);
				overflow: hidden;
			}
		}
		.searchBox {
			width: vw(268);
			height: vw(39);
			line-height: vw(36);
			border: 1px solid #666;
			border-radius: vw(10);
			background: #fff;
			p {
				padding-left: vw(5);
				color: #666;
				font-size: vw(16);
				i {
					font-size: vw(24);
				}
			}
		}
	}
</style>